import React from 'react'
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css';

/*const theme = {
    accentColor: '#448AFF',
    floatingNav: {
        background: 'rgba(56, 87, 138, 0.94)',
        chevron: '#FFA726',
        color: '#FFF',
    },
    headerColor: '#448AFF',
    selectionColor: '#559FFF',
    textColor: {
        active: '#FFF',
        default: '#333',
    },
    todayColor: '#FFA726',
    weekdayColor: '#559FFF',
}*/

const locale = {
    blank: 'Aucune date sélectionnée',
    headerFormat: 'MMM D日 dddd ',
    locale: require('date-fns/locale/zh_cn'),
    todayLabel: {
        long: "今天",
        short: '今天',
    },
    weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    weekStartsOn: 1
};

const theme = {
    accentColor: '#727272',
    floatingNav: {
        background: '#727272',
        chevron: 'rgba(0, 0, 0, 0)',
        color: '#FFF',
    },
    headerColor: 'rgba(0, 0, 0, 0.54)',
    selectionColor: '#727272',
    textColor: {
        active: '#FFF',
        default: '#333',
    },
    todayColor: 'rgba(0, 0, 0, 0.54)',
    weekdayColor: 'rgba(0, 0, 0, 0.64)',
}

const NormalDatePicker = (props) => {
    return (
        <InfiniteCalendar
            width={400}
            height={350}
            onSelect={ props.onSelect }
            locale={locale}
            theme={theme}
        >
        </InfiniteCalendar>
    )
}

export default NormalDatePicker